<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="image"> </div> </div> <script> document.getElementById('image').onmousemove = function (e) { var x = e.clientX; var y = e.clientY; this.style.backgroundPositionX = -x + 'px'; this.style.backgroundPositionY = -y + 'px'; this.style.backgroundImage = 'url(https://i.ibb.co/vhL5kH2/image-14.png)'; } document.getElementById('image').onmouseleave = function (e) { this.style.backgroundPositionX = 0 + 'px'; this.style.backgroundPositionY = 0 + 'px'; this.style.backgroundImage = 'url(https://i.ibb.co/Ph9MCB2/template.png)'; } </script>

.container { max-width: 670px; height: 377px; } #image { max-width: 670px; height: 377px; cursor: crosshair; overflow: hidden; background-image: url('https://i.ibb.co/Ph9MCB2/template.png'); background-repeat: no-repeat; }